<template>
  <!-- :class="{ 'jackpot-unfoldstatus': isUnfold }" -->
  <div class="jackpot jackpot-unfoldstatus">
    <!-- 主图 -->
    <img
      v-if="isSun"
      class="jackpot-main"
      src="/image/lotterymoney/jackpot-main3-icon.svg"
    />
    <img
      v-else
      class="jackpot-main"
      src="/image/lotterymoney/jackpot-main0-icon.png"
    />
    <!-- 标题: GTM+7 周日:超级大赢家 其他:幸运大赢家 -->
    <div
      class="jackpot-titleView items-center"
      :class="{
        'jackpot-titleView-sun': isSun,
      }"
    >
      <div style="white-space: nowrap">
        {{
          lottery.sessionId != lottery.periodId
            ? $t("lotteryMoney.xydyj")
            : $t("lotteryMoney.cjdyj")
        }}
      </div>
    </div>
    <!-- 当期奖池金额达到补贴上限 -->
    <div class="jackpot-alert" v-if="isShowAlert">
      {{
        $t("lotteryMoney.jcsxtx").replace("xxx", lottery.maxBdcIncrementAmount)
      }}
    </div>
    <!-- 活动第几期 -->
    <div class="jackpot-sessionId">
      <span style="font-weight: 700; font-size: 12px">{{
        formatWithTimeZone(lottery.beginTime, "Asia/Jakarta")
      }}</span>
    </div>

    <!-- 滚动数字-美金 -->
    <div
      class="jackpot-money items-center"
      :class="{ 'jackpot-money-sun': isSun }"
    >
      <!-- 美金兑换=>BDC -->
      <div class="jackpot-money-moneyToBdc">
        {{
          toThousands(
            decimalToLength(
              new Decimal(
                lottery.pool ? lottery.pool.lotteryPoolAmount || 0 : 0
              ).mul(1000)
            )
          )
        }}
        BDC
      </div>
      <ClientOnly>
        <div
          v-if="activitytStatus == 2"
          class="jackpot-money-value items-center"
        >
          <span
            class="jackpot-money-value"
            data-text="≈"
            style="font-size: 20px; margin-right: 3px"
          >
            ≈
          </span>
          <CountTo
            class="jackpot-money-value"
            :startVal="moneyStart"
            :endVal="moneyValue"
            :decimals="2"
            :duration="1500"
            prefix="$"
          ></CountTo>
        </div>
        <div v-else class="items-center">
          <span
            class="jackpot-money-value"
            data-text="≈"
            style="font-size: 20px; margin-right: 3px"
          >
            ≈
          </span>
          <span
            class="jackpot-money-value"
            :data-text="`$${toThousands(moneyValue)}`"
          >
            ${{ toThousands(moneyValue) }}
          </span>
        </div>
      </ClientOnly>
    </div>
    <!-- 分配比例 展开/收起 -->
    <!-- @click="unfoldChange" -->
    <div
      class="jackpot-unfold items-center"
      :class="{ 'jackpot-unfold-sun': isSun }"
    >
      <div class="jackpot-unfold-text">
        {{ $t("lotteryMoney.bqdj") }}
      </div>
      <div
        class="jackpot-unfold-value"
        :class="{ 'jackpot-unfold-value-sun': isSun }"
      >
        ${{
          decimalToLength(
            lottery.pool ? lottery.pool.sessionPrizeAmount || 0 : 0
          )
        }}
      </div>
      <div class="jackpot-unfold-text">
        {{ lottery.pool ? (lottery.pool.sessionPrizeRate || 0) * 100 : 0 }}%
      </div>
      <!-- <img
        v-if="isUnfold"
        class="jackpot-unfold-icon"
        src="/image/lotterymoney/jackpot-unfold-icon.svg"
      />
      <img
        v-else
        class="jackpot-unfold-icon"
        src="/image/lotterymoney/jackpot-unfold1-icon.svg"
      /> -->
    </div>
    <!-- 分配比例 -->
    <!-- v-show="isUnfold" -->
    <div
      class="jackpot-bottom items-center"
      :class="{ 'jackpot-bottom-sun': isSun }"
    >
      <div class="jackpot-bottom-item">
        <div class="items-center jackpot-bottom-item-top">
          <div
            class="jackpot-bottom-item-title"
            :class="{ 'jackpot-bottom-item-title-sun': isSun }"
          >
            {{ $t("lotteryMoney.jrcjjc") }}
          </div>
          <div
            class="jackpot-bottom-item-bfb"
            :class="{ 'jackpot-bottom-item-bfb-sun': isSun }"
          >
            {{
              lottery.pool
                ? (lottery.pool.moveToSupperWinnerPrizeRate || 0) * 100
                : 0
            }}%
          </div>
        </div>
        <div
          class="jackpot-bottom-item-value"
          :class="{ 'jackpot-bottom-item-value-sun': isSun }"
        >
          ${{
            decimalToLength(
              lottery.pool ? lottery.pool.moveToSupperWinnerPrizeAmount || 0 : 0
            )
          }}
        </div>
      </div>
      <div class="jackpot-bottom-line"></div>
      <div class="jackpot-bottom-item">
        <div class="items-center jackpot-bottom-item-top">
          <div
            class="jackpot-bottom-item-title"
            :class="{ 'jackpot-bottom-item-title-sun': isSun }"
          >
            {{ $t("lotteryMoney.cjfh") }}
          </div>
          <div
            class="jackpot-bottom-item-bfb"
            :class="{ 'jackpot-bottom-item-bfb-sun': isSun }"
          >
            {{ lottery.pool ? (lottery.pool.teamPrizeRate || 0) * 100 : 0 }}%
          </div>
        </div>
        <div
          class="jackpot-bottom-item-value"
          :class="{ 'jackpot-bottom-item-value-sun': isSun }"
        >
          ${{
            decimalToLength(
              lottery.pool ? lottery.pool.teamPrizeAmount || 0 : 0
            )
          }}
        </div>
      </div>
      <div class="jackpot-bottom-line"></div>
      <div class="jackpot-bottom-item">
        <div class="items-center jackpot-bottom-item-top">
          <div
            class="jackpot-bottom-item-title"
            :class="{ 'jackpot-bottom-item-title-sun': isSun }"
          >
            {{ $t("lotteryMoney.jrxyqjc") }}
          </div>
          <div
            class="jackpot-bottom-item-bfb"
            :class="{ 'jackpot-bottom-item-bfb-sun': isSun }"
          >
            {{
              lottery.pool
                ? (lottery.pool.moveToNextSessionPrizeRate || 0) * 100
                : 0
            }}%
          </div>
        </div>
        <div
          class="jackpot-bottom-item-value"
          :class="{ 'jackpot-bottom-item-value-sun': isSun }"
        >
          ${{
            decimalToLength(
              lottery.pool ? lottery.pool.moveToNextSessionPrizeAmount || 0 : 0
            )
          }}
        </div>
      </div>
    </div>
  </div>
</template>
<script setup name="jackpot">
import Decimal from "decimal.js";
import { toThousands, decimalToLength, getOssFileUrl, debounce } from "@/utils";
// import { useGlobalStore } from "~~/store/global";

// 奖池金额
const CountTo = defineAsyncComponent(() => import("../countTo/index.vue"));

const props = defineProps({
  lottery: Object,
  activitytStatus: Number,
  moneyValue: Number,
  moneyStart: Number,
  isSun: Boolean, // 是不是周日的超级大赢家
});

const emit = defineEmits(["blockGesture"]);
// firebase埋点
// const firebase = useInitFirebase(); // 初始化firebase

// 是否展开: 默认展开,3 秒后收起,进入第二阶段,在展开
// const isUnfold = ref(true);
// let isOneShow = false; // 第二阶段是否已经展示过了
// const globalStore = useGlobalStore();
// 创建一个特定时间的 Date 对象; 用于解决serverTime 初始值小于 1000 的场景
// const ckbzTime = new Date("2024/01/01").getTime();
// const moneyIntervalTime = watch(
//   () =>globalStore.$state.serverTime,
//   (newValue, oldValue) => {
//     if (newValue > ckbzTime && props && process.client) {
//       if (
//         props.lottery.firstStageEndTime &&
//         newValue > Number(props.lottery.firstStageEndTime) &&
//         props.activitytStatus != 6
//       ) {
//         if (!isOneShow) {
//           isOneShow = true;
//            isUnfold.value = true;
//           setTimeout(() => {
//              if (isUnfold.value) isUnfold.value = false;
//             moneyIntervalTime && moneyIntervalTime();
//           }, 3500);
//         }
//       }
//     }
//   },
//   {
//     immediate: true,
//   }
// );
const isShowAlert = computed(() => {
  if (props.lottery) {
    return props.lottery.isReachMax == 1; // 1 显示  其他不显示
  }
  return false;
});
onMounted(() => {
  // setTimeout(() => {
  //   if (isUnfold.value) {
  //     isUnfold.value = false;
  //     emit("blockGesture");
  //   }
  // }, 3500);
});

onBeforeUnmount(() => {
  // moneyIntervalTime && moneyIntervalTime();
});

// 展开收起
// const unfoldChange = () => {
//   isUnfold.value = !isUnfold.value;
// };
// 期数格式化
const formatWithTimeZone = (date, timeZone) => {
  let time = date;

  if (
    Number(props.lottery.beginTimeCopy) < 1725552000000 &&
    props.lottery.beginTimeCopy
  ) {
    time = props.lottery.beginTimeCopy;
  }

  const yearFormatter = new Intl.DateTimeFormat("en-US", {
    year: "numeric",
    timeZone: timeZone,
  });
  const monthFormatter = new Intl.DateTimeFormat("en-US", {
    month: "numeric",
    timeZone: timeZone,
  });
  const dayFormatter = new Intl.DateTimeFormat("en-US", {
    day: "numeric",
    timeZone: timeZone,
  });
  const year = yearFormatter.format(new Date(Number(time)));
  const month = monthFormatter.format(new Date(Number(time)));
  const day = dayFormatter.format(new Date(Number(time)));

  return `${year}.${month}.${day}`;
};
</script>
<style lang="scss" scoped>
.jackpot {
  position: relative;
  height: 219 * 2px;
  width: 100%;
  overflow: hidden;
  &-unfoldstatus {
    height: 265 * 2px;
  }
  &-main {
    width: 100%;
    object-fit: cover;
  }

  &-titleView {
    position: absolute;
    top: 16 * 2px;
    left: 50%;
    transform: translateX(-50%);
    padding: 2 * 2px 8 * 2px;
    border-radius: 10 * 2px 10 * 2px 0px 0px;
    border: 0.6px solid #002853;
    border-bottom: none;
    background: #00e7b5;
    color: #002853;
    font-size: 14 * 2px;
    font-weight: 590;
    &-sun {
      top: 14 * 2px;
      padding: 2 * 2px 16 * 2px;
      background: linear-gradient(89deg, #ff9b01 0.47%, #fabb1d 99.53%);
      color: #5a4100;
    }
  }

  &-money {
    position: absolute;
    top: 51 * 2px;
    left: 50%;
    transform: translateX(-50%);
    justify-content: center;
    flex-direction: column;
    &-moneyToBdc {
      color: #99d9ff;
      font-size: 13 * 2px;
      font-weight: 590;
    }
    &-value {
      position: relative;
      color: #fff2b2;
      font-size: 28 * 2px;
      font-weight: 900;
    }
    &-value::before,
    &-value::after {
      content: attr(data-text);
      position: absolute;
      top: 0;
      left: 0;
      z-index: -1;
      color: rgba(0, 0, 0, 0.25);
    }

    &-value::before {
      transform: translate(0px, 3px);
    }

    &-value::after {
      transform: translate(0px, 3px);
    }
    &-sun {
      top: 49 * 2px;
    }
  }

  &-alert {
    position: absolute;
    top: 106 * 2px;
    left: 50%;
    transform: translateX(-50%);
    color: rgba(255, 255, 255, 0.9);
    font-size: 11 * 2px;
    font-weight: 4000;
    padding: 3 * 2px 1 * 2px;
    min-width: 280 * 2px;
    max-width: 100%;
    text-align: center;
    word-break: break-word;
    border-radius: 0px 0px 16px 16px;
    background: linear-gradient(
      90deg,
      rgba(0, 187, 147, 0) 0.07%,
      #00bb93 10.16%,
      #00dcac 50.16%,
      #00bb93 90.1%,
      rgba(0, 187, 147, 0) 99.93%
    );
  }

  &-sessionId {
    position: absolute;
    top: 160 * 2px;
    left: 50%;
    transform: translateX(-50%);
    color: #008366;
    font-size: 12 * 2px;
    font-weight: 590;
    padding: 2 * 2px 6 * 2px;
    border-radius: 100px;
    border: 0.4px solid #002853;
    background: #00e7b5;
  }

  &-unfold {
    position: absolute;
    top: 190 * 2px;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 100px;
    border: 0.6px solid #002853;
    background: linear-gradient(90deg, #007bff 0.07%, #00b2ff 99.93%);
    padding: 2.5 * 2px 8 * 2px;
    &-sun {
      color: #fff;
      background: linear-gradient(90deg, #ff9a01 0.12%, #ffb701 99.88%);
    }
    &-text {
      color: #fff;
      font-size: 11 * 2px;
    }
    &-value {
      color: #fff2b2;
      font-size: 12 * 2px;
      font-weight: 500;
      margin: 0 4 * 2px;
      &-sun {
        color: #fff;
      }
    }
    &-icon {
      margin-left: 8 * 2px;
      width: 13 * 2px;
      height: 13 * 2px;
    }
  }

  &-bottom {
    position: absolute;
    bottom: 11 * 2px;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 8 * 2px 8 * 2px 0px 0px;
    background: #a8e4ff;
    padding: 8 * 2px 14 * 2px;
    justify-content: space-around;
    width: 355 * 2px;
    &-sun {
      background: #ffecbc;
    }
    &-item {
      display: flex;
      height: 100%;
      flex-direction: column;
      align-items: flex-start;
      justify-content: space-between;

      &-top {
        justify-content: flex-start;
        margin-bottom: 5 * 2px;
        // min-width: 89 * 2px;
        &-right {
          padding-right: 18 * 2px;
          border-right: 0.7px solid red;
        }
        &-left {
          padding-left: 18 * 2px;
        }
      }

      &-title {
        @include multi-line-omit(1);
        // text-wrap: nowrap;white-space: nowrap;
        // max-width: 60 * 2px;
        font-size: 11 * 2px;
        color: #8baed4;
        margin-right: 8 * 2px;
        &-sun {
          color: #d4c08b;
        }
      }

      &-bfb {
        font-size: 11 * 2px;
        font-weight: 400;
        color: #007bff;
        &-sun {
          color: #ffb800;
        }
      }

      &-value {
        font-size: 12 * 2px;
        font-weight: 500;
        color: #6b8db2;
        &-sun {
          color: #b49852;
        }
      }
    }
    &-line {
      width: 0.7px;
      height: 25 * 2px;
      margin: 0 12 * 2px;
      stroke-width: 0.5px;
      background-color: rgba(115, 119, 128, 0.15);
    }
  }
}
</style>
